<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>待处理工单</title>
	<meta name="description" content="待处理工单">
	<meta name="keywords" content="待处理工单">

	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<!-- Bootstrap 3.3.6 -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" th:src="@{https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js}"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" th:src="@{https://oss.maxcdn.com/respond/1.4.2/respond.min.js}"></script>
	<![endif]-->
	<!-- 页面meta /-->

	<link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.min.css" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
	<link rel="stylesheet" href="../../static/plugins/font-awesome/css/font-awesome.min.css" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
	<link rel="stylesheet" href="../../static/plugins/ionicons/css/ionicons.min.css" th:href="@{/plugins/ionicons/css/ionicons.min.css}">
	<link rel="stylesheet" href="../../static/plugins/iCheck/square/blue.css" th:href="@{/plugins/iCheck/square/blue.css}">
	<link rel="stylesheet" href="../../static/plugins/morris/morris.css" th:href="@{/plugins/morris/morris.css}">
	<link rel="stylesheet" href="../../static/plugins/jvectormap/jquery-jvectormap-1.2.2.css" th:href="@{/plugins/jvectormap/jquery-jvectormap-1.2.2.css}">
	<link rel="stylesheet" href="../../static/plugins/datepicker/datepicker3.css" th:href="@{/plugins/datepicker/datepicker3.css}">
	<link rel="stylesheet" href="../../static/plugins/daterangepicker/daterangepicker.css" th:href="@{/plugins/daterangepicker/daterangepicker.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" th:href="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}">
	<link rel="stylesheet" href="../../static/plugins/datatables/dataTables.bootstrap.css" th:href="@{/plugins/datatables/dataTables.bootstrap.css}">
	<link rel="stylesheet" href="../../static/plugins/treeTable/jquery.treetable.css" th:href="@{/plugins/treeTable/jquery.treetable.css}">
	<link rel="stylesheet" href="../../static/plugins/treeTable/jquery.treetable.theme.default.css" th:href="@{/plugins/treeTable/jquery.treetable.theme.default.css}">
	<link rel="stylesheet" href="../../static/plugins/select2/select2.css" th:href="@{/plugins/select2/select2.css}">
	<link rel="stylesheet" href="../../static/plugins/colorpicker/bootstrap-colorpicker.min.css" th:href="@{/plugins/colorpicker/bootstrap-colorpicker.min.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css" th:href="@{/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css}">
	<link rel="stylesheet" href="../../static/plugins/adminLTE/css/AdminLTE.css" th:href="@{/plugins/adminLTE/css/AdminLTE.css}">
	<link rel="stylesheet" href="../../static/plugins/adminLTE/css/skins/_all-skins.min.css" th:href="@{/plugins/adminLTE/css/skins/_all-skins.min.css}">
	<link rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}">
	<link rel="stylesheet" href="../../static/plugins/ionslider/ion.rangeSlider.css" th:href="@{/plugins/ionslider/ion.rangeSlider.css}">
	<link rel="stylesheet" href="../../static/plugins/ionslider/ion.rangeSlider.skinNice.css" th:href="@{/plugins/ionslider/ion.rangeSlider.skinNice.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-slider/slider.css" th:href="@{/plugins/bootstrap-slider/slider.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css" th:href="@{/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css}">
</head>

	<body class="hold-transition skin-purple sidebar-mini">

		<div class="wrapper">

			<!-- 页面头部-->
			<div th:replace="common/commons :: head"></div>
			<!-- 导航侧栏 -->
			<div th:replace="common/commons :: aside"></div>

			<!-- 内容区域 -->
			<div class="content-wrapper">

				<!-- 内容头部 -->
				<section class="content-header">
					<h1>待处理工单</h1>
					<ol class="breadcrumb">
						<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
						<li><a href="#">工单管理</a></li>
						<li class="active">待处理工单</li>
					</ol>
				</section>
				<!-- 内容头部 /-->

				<!-- 正文区域 -->
				<section class="content">

					<!-- .box-body -->
					<div class="box box-primary">

						<div class="box-body">

							<!-- 数据表格 -->
							<div class="table-box">

								<!--工具栏-->
								
								<div class="box-tools pull-left">
									<div class="form-group form-inline">
										<div class="form-control">区分</div>
										<select class="form-control">
											<option>请选择</option>
											<option>宝安</option>
											<option>光明</option>
										</select>
										<div class="form-control">中心</div>
										<select class="form-control">
											<option>请选择</option>
											<option>宝安</option>
											<option>光明</option>
										</select>
										<div class="form-control">地址</div>
										<input type="text" class="form-control input-sm">
										<button type="button" class="btn btn-default" ><i class="fa fa-search-plus"></i> 查询</button>
									</div>
									</div>
									
								</div>
								<!--工具栏/-->

								<!--数据列表-->
								<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
									<thead>
										<tr>
											<th>流水单号</th>
											<th>区分</th>
											<th>中心</th>

											<th>派单人</th>
											<th>投诉用户</th>
											<th>联系方式</th>
											<th>投诉地址</th>
											<th>工单状态</th>
											<th>派单日期</th>

											<th class="text-center">操作</th>
										</tr>
									</thead>
									<tbody>
										<tr th:each="order:${pagers.list}">
											<td th:text="${order.flowId}">
												1
											</td>
											<td th:text="${order.areaName}"></td>
											<td th:text="${order.centerName}"></td>
											<td th:text="${order.createdName}"></td>
											<td th:text="${order.contact}"></td>
											<td th:text="${order.contactTel}"></td>
											<td th:text="${order.address}"></td>
											<td th:text="${order.statusName}"></td>
											<td th:text="${#dates.format(order.creationDate,'yyyy-MM-dd')}"></td>
											<td class="text-center">
												<a th:href="@{'/handle/view/' + ${order.id}}">查看</a>
												<button type="button" class="btn bg-olive btn-xs" onclick='location.href="#"'>处理</button>
											</td>
										</tr>
									</tbody>
									<!--
                            <tfoot>
                            <tr>
                            <th>Rendering engine</th>
                            <th>Browser</th>
                            <th>Platform(s)</th>
                            <th>Engine version</th>
                            <th>CSS grade</th>
                            </tr>
                            </tfoot>-->
								</table>
								<!--数据列表/-->

							</div>
							<!-- 数据表格 /-->

						</div>
						<!-- /.box-body -->

						<!-- .box-footer-->
						<div class="box-footer">
							<div class="pull-left">
								<div class="form-group form-inline">
									总共2 页，共14 条数据。 每页
									<select class="form-control">
										<option>10</option>
										<option>15</option>
										<option>20</option>
										<option>50</option>
										<option>80</option>
									</select> 条
								</div>
							</div>

							<div class="box-tools pull-right">
								<ul class="pagination">
									<li>
										<a href="#" aria-label="Previous">首页</a>
									</li>
									<li>
										<a href="#">上一页</a>
									</li>
									<li>
										<a href="#">下一页</a>
									</li>
									<li>
										<a href="#" aria-label="Next">尾页</a>
									</li>
								</ul>
							</div>

						</div>
						<!-- /.box-footer-->


				</section>
				<!-- 正文区域 /-->

			</div>
			<!-- 内容区域 /-->

			<!-- 底部导航 -->
            <div th:replace="common/commons :: footer"></div>
            </div>
			<!-- 底部导航 /-->

		</div>

		<script src="../../static/plugins/jQuery/jquery-2.2.3.min.js" th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
		<script src="../../static/plugins/jQueryUI/jquery-ui.min.js" th:src="@{/plugins/jQueryUI/jquery-ui.min.js}"></script>
		<script>
			$.widget.bridge('uibutton', $.ui.button);
		</script>
		<script src="../../static/plugins/bootstrap/js/bootstrap.min.js" th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
		<script src="../../static/plugins/raphael/raphael-min.js" th:src="@{/plugins/raphael/raphael-min.js}"></script>
		<script src="../../static/plugins/morris/morris.min.js" th:src="@{/plugins/morris/morris.min.js}"></script>
		<script src="../../static/plugins/sparkline/jquery.sparkline.min.js" th:src="@{/plugins/sparkline/jquery.sparkline.min.js}"></script>
		<script src="../../static/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" th:src="@{/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
		<script src="../../static/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" th:src="@{/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>
		<script src="../../static/plugins/knob/jquery.knob.js" th:src="@{/plugins/knob/jquery.knob.js}"></script>
		<script src="../../static/plugins/daterangepicker/moment.min.js" th:src="@{/plugins/daterangepicker/moment.min.js}"></script>
		<script src="../../static/plugins/daterangepicker/daterangepicker.js" th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script>
		<script src="../../static/plugins/datepicker/bootstrap-datepicker.js" th:src="@{/plugins/datepicker/bootstrap-datepicker.js}"></script>
		<script src="../../static/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js" th:src="@{/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js}"></script>
		<script src="../../static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" th:src="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}"></script>
		<script src="../../static/plugins/slimScroll/jquery.slimscroll.min.js" th:src="@{/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
		<script src="../../static/plugins/fastclick/fastclick.js" th:src="@{/plugins/fastclick/fastclick.js}"></script>
		<script src="../../static/plugins/iCheck/icheck.min.js" th:src="@{/plugins/iCheck/icheck.min.js}"></script>
		<script src="../../static/plugins/adminLTE/js/app.min.js" th:src="@{/plugins/adminLTE/js/app.min.js}"></script>
		<script src="../../static/plugins/treeTable/jquery.treetable.js" th:src="@{/plugins/treeTable/jquery.treetable.js}"></script>
		<script src="../../static/plugins/select2/select2.full.min.js" th:src="@{/plugins/select2/select2.full.min.js}"></script>
		<script src="../../static/plugins/colorpicker/bootstrap-colorpicker.min.js" th:src="@{/plugins/colorpicker/bootstrap-colorpicker.min.js}"></script>
		<script src="../../static/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js" th:src="@{/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js}"></script>
		<script src="../../static/plugins/bootstrap-markdown/js/bootstrap-markdown.js" th:src="@{/plugins/bootstrap-markdown/js/bootstrap-markdown.js}"></script>
		<script src="../../static/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js" th:src="@{/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js}"></script>
		<script src="../../static/plugins/bootstrap-markdown/js/markdown.js" th:src="@{/plugins/bootstrap-markdown/js/markdown.js}"></script>
		<script src="../../static/plugins/bootstrap-markdown/js/to-markdown.js" th:src="@{/plugins/bootstrap-markdown/js/to-markdown.js}"></script>
		<script src="../../static/plugins/ckeditor/ckeditor.js" th:src="@{/plugins/ckeditor/ckeditor.js}"></script>
		<script src="../../static/plugins/input-mask/jquery.inputmask.js" th:src="@{/plugins/input-mask/jquery.inputmask.js}"></script>
		<script src="../../static/plugins/input-mask/jquery.inputmask.date.extensions.js" th:src="@{/plugins/input-mask/jquery.inputmask.date.extensions.js}"></script>
		<script src="../../static/plugins/input-mask/jquery.inputmask.extensions.js" th:src="@{/plugins/input-mask/jquery.inputmask.extensions.js}"></script>
		<script src="../../static/plugins/datatables/jquery.dataTables.min.js" th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
		<script src="../../static/plugins/datatables/dataTables.bootstrap.min.js" th:src="@{/plugins/datatables/dataTables.bootstrap.min.js}"></script>
		<script src="../../static/plugins/chartjs/Chart.min.js" th:src="@{/plugins/chartjs/Chart.min.js}"></script>
		<script src="../../static/plugins/flot/jquery.flot.min.js" th:src="@{/plugins/flot/jquery.flot.min.js}"></script>
		<script src="../../static/plugins/flot/jquery.flot.resize.min.js" th:src="@{/plugins/flot/jquery.flot.resize.min.js}"></script>
		<script src="../../static/plugins/flot/jquery.flot.pie.min.js" th:src="@{/plugins/flot/jquery.flot.pie.min.js}"></script>
		<script src="../../static/plugins/flot/jquery.flot.categories.min.js" th:src="@{/plugins/flot/jquery.flot.categories.min.js}"></script>
		<script src="../../static/plugins/ionslider/ion.rangeSlider.min.js" th:src="@{/plugins/ionslider/ion.rangeSlider.min.js}"></script>
		<script src="../../static/plugins/bootstrap-slider/bootstrap-slider.js" th:src="@{/plugins/bootstrap-slider/bootstrap-slider.js}"></script>
		<script src="../../static/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js" th:src="@{/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js}"></script>
		<script src="../../static/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js" th:src="@{/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
		<script>
			$(document).ready(function() {
				// 选择框
				$(".select2").select2();

				// WYSIHTML5编辑器
				$(".textarea").wysihtml5({
					locale: 'zh-CN'
				});
			});

			// 设置激活菜单
			function setSidebarActive(tagUri) {
				var liObj = $("#" + tagUri);
				if(liObj.length > 0) {
					liObj.parent().parent().addClass("active");
					liObj.addClass("active");
				}
			}

			$(document).ready(function() {

				// 激活导航位置
				setSidebarActive("travellog-manage");

				// 列表按钮 
				$("#dataList td input[type='checkbox']").iCheck({
					checkboxClass: 'icheckbox_square-blue',
					increaseArea: '20%'
				});
				// 全选操作 
				$("#selall").click(function() {
					var clicks = $(this).is(':checked');
					if(!clicks) {
						$("#dataList td input[type='checkbox']").iCheck("uncheck");
					} else {
						$("#dataList td input[type='checkbox']").iCheck("check");
					}
					$(this).data("clicks", !clicks);
				});
			});
		</script>
	</body>

</html>